<template>
<div style="width:800px;padding:50px;">
  <el-form ref="form" :rules="rules" :model="form">
    <el-form-item prop="userName">
      <el-input v-model="form.userName"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
      <el-button @click="hReset">重置表单</el-button>
      <el-button @click="ajax">ajax</el-button>
    </el-form-item>
  </el-form>
</div>
</template>
<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        form: {
          userName: '',
          password: ''
        },
        // rules: {
        // 字段名1：表示要验证的属性
        // 值: 表示验证规则列表。它是一个数组，数组中的每一项表示一条规则。
        //     数组中的多条规则会按顺序进行
        rules: {
          userName:[ 
            {required:true, message:'用户名不可少',trigger: 'blur'},
            {pattern: /^1\d{10}$/, message:'格式不对', trigger:'blur' }
          ],
          password: [
            {required:true, message:'密码不可少',trigger: 'blur'},
            {min:6, max:8,message:'密码6-8之间',trigger: 'blur'},
            {
              // rule：采用的规则
              // value: 被校验的值
              // callback是回调函数， 
              //      如果通过了规则检验，就直接调用callback()
              //      如果没有通过规则检验，就调用callback(错误对象，在错误对象中说明原因)
              //         例如：callback(new Error('错误说明'))
              validator:function(rule, value, callback){
                // console.log(rule, value, callback)
                if(value === '123456') {
                  // 不通过
                  callback(new Error('密码不能是123456!'))
                } else {
                  // 通过
                  callback()
                }
                // value === '123456' ?  callback(new Error('密码不能是123456!')) : callback()
              }, 
              trigger:'blur'
            }
          ]
        }
      }
    },
    methods: {
      ajax () {
        axios({url:'/api/vue-admin-template/table/list'})
      },
      hReset() {
        this.$refs.form.resetFields()
      },
      doSubmit () {
        // 具体的提交动作
        alert('具体的提交动作')
      },
      onSubmit() {
        // 手动兜底校验- 格式
        // this.$refs.form.validate((校验结果)=>{

        // })
        this.$refs.form.validate(valid =>{
          console.log('表单校验结果', valid)
          if(valid) {
            this.doSubmit()
          }
          // valid && this.doSubmit()
        })

        // if(this.form.userName === '') {
        //   alert('格式不对')
        //   return 
        // }
        // console.log('submit!');
      }
    }
  }
</script>